<template>
	<uni-popup
	ref="popup" 
	type="center" 
	:safe-area="false">
		<view class="box">
			<view @click="close" class="box_close l-f l-row-c" hover-class="hover-class">
				<uni-icons type="closeempty" size="40rpx" color="#ffffff"></uni-icons>
			</view>
			<view class="box_title">WLAN</view>
			<view class="box_desc">可用的WLAN列表</view>
			<scroll-view 
			class="box_list"
			scroll-y="true">
				<view 
				@click.stop="onConnect(item)"
				@longpress="onMore(item)"
				class="box_list_item l-f"
				hover-class="hover-scale"
				:hover-stay-time="100"
				v-for="(item,index) in list"
				:key="index">
					<view class="box_list_item_wifi l-f l-row-c">
						<image 
						class="box_list_item_wifi_icon" 
						:src="wifiNumIcon(item.signalStrength)" 
						mode="widthFix"></image>
					</view>
					<view class="box_list_item_info">
						<view class="box_list_item_info_name l-line1"
						:class="currentIndex === index ? 'box_list_item_info_active' : ''">{{item.SSID ? item.SSID : item.BSSID}}</view>
						<view class="box_list_item_info_status">{{currentIndex === index ? '已连接' : item.Exist ? '已保存，加密' : '加密'}}</view>
					</view>
				</view>
				<uni-load-more :status="loadStatus" :content-text="{
					contentrefresh: '正在搜索中...'
				}" icon-type="snow"></uni-load-more>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name:"wifi-list",
		props: {
			list: {
				type: Array,
				default: function() {
					return []
				}
			},
			connect: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		computed: {
			wifiNumIcon: function() {
				return (num) => {
					let numAbs = Math.abs(num)
					if(numAbs < 70) {
						return '/static/images/wifi_4.png'
					}else
					if(70 <= numAbs && numAbs < 80) {
						return '/static/images/wifi_3.png'
					}else
					if(80 <= numAbs && numAbs < 90) {
						return '/static/images/wifi_2.png'
					}else
					if(90 <= numAbs && numAbs < 95) {
						return '/static/images/wifi_1.png'
					}else{
						return '/static/images/wifi_0.png'
					}
				}
			},
			loadStatus() {
				if(this.list.length === 0) {
					return 'loading'
				}else {
					return 'no-more'
				}
			},
			currentIndex: function() {
				for (let i = 0; i < this.list.length; i++) {
					if(this.list[i].BSSID === this.connect.BSSID) {
						return i
					}
				}
				return -1
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			onConnect(item) {
				this.$emit('connect',item)
			},
			onMore(item) {
				uni.vibrateShort()
				if(item.isExist) {
					uni.showActionSheet({
						title: item.SSID,
						itemList: ['删除网络','修改密码'],
						itemColor: 'rgba(72, 228, 239, 1)',
						success: (e) => {
							switch(e.tapIndex) {
								case 0:
								this.$emit('del',item)
								break;
								case 1:
								this.$emit('edit',{
									...item,
									password: e.content
								})
								break;
							}
						}
					})
				}else {
					uni.showActionSheet({
						title: item.SSID,
						itemList: ['连接网络'],
						itemColor: 'rgba(72, 228, 239, 1)',
						success: (e) => {
							this.$emit('connect',item)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.box {
	background: url("@/static/images/wifi_list_bg.png") no-repeat;
	width: 630rpx;
	height: 800rpx;
	background-size: 100%;
	position: relative;
	padding-top: 64rpx;
	padding-left: 36rpx;
	padding-right: 36rpx;
	padding-bottom: 60rpx;
	box-sizing: border-box;
	&_close {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 20rpx;
		right: 30rpx;
	}
	&_title {
		font-size: 38rpx;
		color: #ffffff;
		font-weight: 700;
	}
	&_desc {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: rgba(136, 136, 136, 1);
	}
	&_list {
		height: 580rpx;
		margin-top: 20rpx;
		&_item {
			margin-top: 30rpx;
			height: 150rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			width: 100%;
			background: url("@/static/images/wifi_item_bg.png") no-repeat;
			background-size: 100% 100%;
			&_wifi {
				background: url("@/static/images/wifi_bg.png") no-repeat;
				background-size: 100%;
				width: 96rpx;
				height: 96rpx;
				&_icon {
					width: 42rpx;
					height: 42rpx;
				}
			}
			&_info {
				margin-left: 54rpx;
				&_name {
					font-size: 32rpx;
					color: #ffffff;
					font-weight: 700;
					height: 40rpx;
					line-height: 40rpx;
				}
				&_active {
					color: rgba(72, 228, 239, 1);
				}
				&_status {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: rgba(136, 136, 136, 1);
				}
			}
		}
	}
}
.hover-scale {
	transform: scale(.95);
}
</style>